<template>
	<view class="container" :style="{'height': wh + 'px'}">
		<scroll-view class="category-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
			<view :class="['category-item flex-1', categoryIndex==index&&'active']"
				v-for="(item, index) in categoryList" :key="index" @click="selectCate(item, index)">
				<text>{{item.name}}</text>
				<view class="category-count flex-1" v-if="item.count>0">{{item.count}}</view>
			</view>
		</scroll-view>
		<view class="goods-box">
			<scroll-view class="goods-tabs" scroll-x scroll-with-animation :scroll-left="tabsScroll">
				<view :class="['tabs-item',categoryIndex==index&&'active']" v-for="(item, index) in categoryList"
					:key="index" @click="selectCate(item, index)">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view class="goods-content" :style="{'height': content_height + 'px'}" scroll-y scroll-with-animation
				:scroll-top="gooodsTop" @scroll="scrollEvt">
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
					<view class="item-title" :id="item.id">{{item.title}}</view>
					<view class="item-box">
						<view class="box-items flex-1" v-for="(items, idx) in item.children" :key="idx">
							<text>{{items.name}}</text>
							<goods-button :goods="items" @change-goods="changeGoods"></goods-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		category_data,
		goods_data
	} from '@/common/source_data.js'
	import {
		computedData
	} from '@/common/common.js'
	import goodsButton from '@/components/goods-button/goods-button.vue'
	export default {
		components: {
			goodsButton
		},
		data() {
			return {
				wh: 0,
				// 分类数组
				categoryList: [],
				// 商品数组
				goodsList: [],
				// 分类选中的下标
				categoryIndex: 0,
				// 左侧大类滚动条移动距离
				scrollTop: 0,
				// 商品区域顶部分类——滚动条移动的距离
				tabsScroll: 0,
				// 商品区域宽度
				tabs_w: 0,
				// 商品区域顶部分类DOM数组
				rect_list: [],
				// 左侧分类区域的DOM
				category_rect: [],
				// 左侧分类区域的高度
				category_h: 0,
				// 商品具体内容DOM
				goods_rect: [],
				// 商品具体内容_鼠标滚动距离
				gooodsTop: 0
			}
		},
		onLoad() {
			const system = uni.getSystemInfoSync()
			this.wh = system.windowHeight

			this.initData()
		},
		computed: {
			content_height() {
				return this.wh - 45
			}
		},
		onReady() {
			// 获取商品区域顶部分类DOM
			uni.createSelectorQuery().selectAll('.tabs-item').boundingClientRect((rect) => {
				this.rect_list = rect
			}).exec()

			// 获取左侧分类区域的DOM
			uni.createSelectorQuery().selectAll('.category-item').boundingClientRect((rect) => {
				this.category_rect = rect
			}).exec()

			// 获取商品区域宽度
			uni.createSelectorQuery().select('.goods-tabs').boundingClientRect((rect) => {
				this.tabs_w = rect.width
			}).exec()

			// 获取左侧分类高度
			uni.createSelectorQuery().select('.category-box').boundingClientRect((rect) => {
				this.category_h = rect.height
			}).exec()

			// 获取商品具体内容DOM
			uni.createSelectorQuery().selectAll('.item-title').boundingClientRect((rect) => {
				this.goods_rect = rect
			}).exec()
		},
		methods: {
			initData() {
				this.categoryList = category_data.map(x => {
					return {
						...x,
						count: 0
					}
				})
				this.goodsList = computedData(category_data, goods_data)
			},
			// 滚动选中效果
			scrollEvt(e) {
				var top = e.detail.scrollTop
				this.categoryIndex = this.goods_rect.findIndex(x => x.top > top)
				this.getDomInfo(this.categoryIndex)
			},
			selectCate(item, index) {
				// 获取右侧对应的具体商品
				this.getGoodsDom(item)
				// 设置选中
				this.categoryIndex = index
				// 获取元素信息
				this.getDomInfo(index)
			},
			getDomInfo(index) {
				/* 右侧 */
				// 获取当前元素的right坐标
				var item_right = this.rect_list[index].right
				// 当前元素离容器中心点的距离
				var center_rect = item_right - this.tabs_w
				// 让滚动条移动这个距离
				this.tabsScroll = center_rect


				/* 左侧 */
				// 获取左侧分类元素的bottom坐标
				var item_top = this.category_rect[index].top
				this.scrollTop = item_top - this.category_h / 2
			},
			// 获取具体商品坐标信息
			getGoodsDom(item) {
				var goods_top = this.goods_rect.find(x => x.id == item.id).top
				this.gooodsTop = goods_top - 45 // 45是顶部分类
			},
			// 加减商品
			changeGoods(e) {
				const {
					type,
					goods,
					num
				} = e
				if (type == 0) {
					goods.num--
				} else if (type == 1) {
					goods.num = num
				} else if (type == 2) {
					goods.num++
				}
				// 计算已选商品数量
				this.getCategoryNum(goods)
			},
			getCategoryNum(goods) {
				// 先找到当前商品的大类
				var list = this.goodsList.find(x => x.id == goods.pid).children
				// 计算该大类的数量
				var count = list.reduce((pre, next) => {
					return pre += next.num
				}, 0)
				// 锁定左侧
				for (var i = 0; i < this.categoryList.length; i++) {
					if (this.categoryList[i].id == list[0].pid) {
						this.categoryList[i].count = count
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F6F6F6;
		display: flex;
		font-size: 14px;

		.category-box {
			width: 100px;
			background-color: #FFF;

			.category-item {
				height: 40px;
				border-bottom: 1px solid #EEE;
				position: relative;

				&.active {
					background-color: #42B983;
					color: #FFF;
				}

				.category-count {
					position: absolute;
					right: 0;
					top: 0;
					width: 20px;
					height: 20px;
					border-radius: 50px;
					background-color: orange;
					color: #333;
				}
			}
		}

		.goods-box {
			width: calc(100% - 100px);
			background-color: #EEE;

			.goods-tabs {
				height: 45px;
				background-color: #FFF;
				white-space: nowrap;

				.tabs-item {
					display: inline-block;
					border-radius: 15px;
					border: 2rpx solid #42B983;
					margin-top: 12px;
					padding: 0 10px;
					margin-right: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;

					&.active {
						background-color: #42B983;
						color: #FFF;
					}
				}
			}

			.goods-content {
				padding: 10rpx;
				box-sizing: border-box;
				overflow: auto;

				.goods-item {
					border: 1px solid #EEE;

					.item-title {
						height: 40px;
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						font-size: 16px;
					}

					.item-box {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: 10px;

						.box-items {
							height: 70px;
							background-color: #FFF;
							border-radius: 10rpx;
							position: relative;
						}
					}
				}
			}
		}
	}
</style>